<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-code-generator</title>
    <link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/code-generator/my-css/mycss.css}" >
</head>
<body>
<div class="layui-container">
    <div th:replace="~{code-generator/my-common/common::header}"></div>

    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>添加模板配置 - 列表页配置</legend>
        </fieldset>
    </div>
    <div class="layui-row">
        <a th:href="@{/}" class="layui-btn layui-bg-gray layui-btn layui-btn-xs">返回</a>
    </div>
    <div class="layui-row" style="margin-top: 15px;">
        <blockquote class="layui-elem-quote">
            表名：<span th:text="${tableDbName}"></span></br>
            主键：<span th:each="tablePrimaryKey : ${tablePrimaryKeys}" th:text="${tablePrimaryKey} + ' '"></span></br>
            注释：<span th:text="${tableComment}"></span></br>
        </blockquote>
    </div>
    <div class="layui-row">
        <input id="tableKey" th:value="${tableKey}" hidden="true">
        <form class="layui-form" action="">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>基础配置信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单配置</label>
                <div class="layui-input-block">
                    <select name="codeNavigationConfigId" lay-verify="required">
                        <option value="">请选择菜单配置</option>
                        <option th:each="codeNavigationConfig : ${codeNavigationConfigs}" th:value="${codeNavigationConfig.id}" th:text="${codeNavigationConfig.configName}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置名称</label>
                <div class="layui-input-block">
                    <input type="text" name="configName" id="configName" lay-verify="required" autocomplete="off" placeholder="请输入配置名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置备注</label>
                <div class="layui-input-block">
                    <textarea name="description" id="description" placeholder="请输入配置备注" class="layui-textarea"></textarea>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>列表页配置</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">页面名称</label>
                <div class="layui-input-block">
                    <input type="text" name="navName" id="navName" lay-verify="required" autocomplete="off" placeholder="请输入页面名称" class="layui-input" th:value="${tableComment}">
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>搜索框配置</legend>
            </fieldset>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">name</label>
                    <div class="layui-input-block">
                        <select name="searchInputName" id="searchInputName" lay-filter="searchInputName-filter">
                            <option value="">请选择搜索框name</option>
                            <option th:each="column : ${columns}" th:value="${column.name}" th:text="${column.dbName}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">id</label>
                    <div class="layui-input-inline">
                        <input type="text" name="searchInputId" id="searchInputId" autocomplete="off" class="layui-input" readonly="readonly">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">placeholder</label>
                    <div class="layui-input-inline">
                        <input type="text" name="searchInputPlaceholder" id="searchInputPlaceholder" autocomplete="off" placeholder="请输入搜索框placeholder" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">sort</label>
                    <div class="layui-input-inline">
                        <input type="text" name="searchInputSort" id="searchInputSort" autocomplete="off" placeholder="请输入搜索框sort" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">操作</label>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" id="addConfigBtn">添加</button>
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-fluid layui-btn-warm" id="clearConfigBtn">清空</button>
                </div>
            </div>
            <div id="searchInputDivId">
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>表格页配置</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">表格链接</label>
                <div class="layui-input-block">
                    <input type="text" name="requestUrl" id="requestUrl" autocomplete="off" class="layui-input" th:value="${tableUrl}">
                </div>
            </div>
            <div class="layui-form-item">
                <input id="tableDbNameId" name="tableDbName" th:value="${tableDbName}" hidden="true">
                <label class="layui-form-label">列表配置</label>
                <div class="layui-input-block">
                    <table class="layui-table" id="configTable"></table>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="submitBtn">创建</button>
                    </div>
                    <div class="layui-col-md6">
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-fluid">重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div th:replace="~{code-generator/my-common/common::footer}"></div>
</div>
</body>
<script th:src="@{/webjars/layui/layui.js}"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:inline="none">

    layui.use(['form', 'layer', 'table', 'layedit', 'util', 'element'], function(){
        var form = layui.form,
            layer = layui.layer,
            util = layui.util,
            element = layer.element,
            table = layui.table;

        let searchInputArray = new Array();

        form.on('select(searchInputName-filter)', function (data) {
            let searchInputNameValue = data.value;
            $("#searchInputId").val(searchInputNameValue);
            $("#searchInputPlaceholder").val('请输入'+searchInputNameValue);
            return false;
        });

        $('#addConfigBtn').click(function () {
            let searchInputItem = {};

            searchInputItem.name = $('#searchInputName').val();
            searchInputItem.id = $('#searchInputName').val();
            if(searchInputItem.name === '') {
                layer.msg('请选择搜索框name');
                return false;
            }

            searchInputItem.placeholder = $('#searchInputPlaceholder').val();
            searchInputItem.sort = $('#searchInputSort').val();
            searchInputArray.push(searchInputItem);
            showSearchInputDivId(searchInputArray);
            return false;
        });

        window.closeSearchInputTag = function(index) {
            searchInputArray.splice(index, 1);
            showSearchInputDivId(searchInputArray);
        }

        let showSearchInputDivId = function(searchInputArray) {
            let tempArray = new Array();
            $.each(searchInputArray, function(index, item) {
                tempArray.push('<div class="layui-input-block"><div class="tag-class">name='+ item['name'] + ', id=' + item['id'] +
                    ', placeholder=' + item['placeholder'] + ', sort=' + item['sort'] +
                    '&nbsp;<a class="tag-close" onclick=closeSearchInputTag('+index+')>' +
                    '<i class="layui-icon layui-icon-close"></i></a></div></div>');
            });
            $('#searchInputDivId').html(tempArray.join(""));
        }

        $('#clearConfigBtn').click(function () {
            searchInputArray.splice(0, searchInputArray.length);
            return false;
        });

        let postBody = {};
        form.on('submit(submitBtn)', function(data) {
            if(searchInputArray.length == 0) {
                layer.msg("请添加至少一条搜索框配置");
                return false;
            }

            let checkStatus = table.checkStatus('configTable');
            if(checkStatus.data.length === 0) {
                layer.msg('请选择至少一条表格页配置', {icon: 5});
                return false;
            }

            let dbTableName = $("#tableDbNameId").val();

            let listPageConfig = {};
            let navName = data.field.navName;
            let requestUrl = data.field.requestUrl;

            listPageConfig.navName = navName;
            listPageConfig.dbTableName = dbTableName;

            listPageConfig.searchInputs = searchInputArray;
            listPageConfig.tableConfig = {};
            listPageConfig.tableConfig.requestUrl = requestUrl;

            let colsArray = checkStatus.data;
            let navigationConfigItem = new Array();
            colsArray.map(function(item, index) {
                let colsItem = {};
                colsItem.field = item.colsField;
                colsItem.title = item.colsTitle;
                colsItem.width = item.colsWidth;
                colsItem.sort = item.sort;
                navigationConfigItem.push(colsItem);
            });
            listPageConfig.tableConfig.cols = navigationConfigItem;

            postBody.codeNavigationConfigId = data.field.codeNavigationConfigId
            postBody.configName = data.field.configName;
            postBody.dbTableName = dbTableName;
            postBody.description = data.field.description;
            postBody.listPageConfig = listPageConfig;

            $.ajax({
                url:'/plugin/codeListPageConfig/create/',
                type:'post',
                dataType:'json',
                contentType:"application/json",
                async:true,
                cache:false,
                data:JSON.stringify(postBody),
                success:function(res) {
                    if(res.code === 0) {
                        layer.msg('操作成功', {icon: 1});
                    } else {
                        layer.msg('操作失败，异常原因：' + res.msg, {icon: 5});
                    }
                },
                error:function(res) {
                    layer.msg('网络异常', {icon: 5});
                }
            });

            return false;
        });

        table.render({
            elem: '#configTable'
            ,limit: Number.MAX_VALUE
            ,url:'/generate/listTableInfo?tableKey=' + $('#tableKey').val()
            ,cols: [[
                {type:'checkbox'},
                {field:'dbColsField', title: '数据库字段名', edit: 'text'},
                {field:'colsField', title: '变量', edit: 'text'},
                {field:'colsTitle', title: '标题', edit: 'text'},
                {field:'colsWidth', title: '宽度', edit: 'text'},
                {field:'sort', title: 'tab排序', edit: 'text'},
                {field:'dbType', title: '字段类型'},
                {field:'columnSize', title: '字段大小'}
            ]]
            ,page: false
        });

    });
</script>
</html>